<template>
    <div class="settings">
        <div class="liuhai"></div>
        <div class="settings-header">
            <div>
                <i class="settings-icon" @click="goTo('/mine')">&#xe600;</i>
            </div>
            <div>设置</div>
            <div></div>
        </div>
        <div class="settings-body">
            <ul class="b-settings">
                <li @click="goTo('/changepwd')">
                    <p>修改登录密码</p>
                    <i class="settings-icon">&#xe60f;</i>
                </li>
                <li @click="goTo('/msgreminding')">
                    <p>消息提醒</p>
                    <i class="settings-icon">&#xe60f;</i>
                </li>
                <li @click="goTo('/privacy')">
                    <p>隐私</p>
                    <i class="settings-icon">&#xe60f;</i>
                </li>
            </ul>
            <ul class="n-settings">
                <li @click="Checkupdates()">
                    <p>检查更新</p>
                    <i class="settings-icon">&#xe60f;</i>
                </li>
                <li @click="goTo('/forus')">
                    <p>关于我们</p>
                    <i class="settings-icon">&#xe60f;</i>
                </li>
            </ul>
            <div class="out-login-false" id="outLogin" @click="outLogin('/login')">退出登录</div>
        </div>
        <van-dialog class="checkUpdatesBox" v-model="show" title=""  show-cancel-button :beforeClose="chargeBtn" >
            <h3 class="checkUpdatesBoxH3">{{versionNumber}}</h3>
            <div class="updateContent">
                <p>1.至游优化了各种使用体验</p>
                <p>2.至游修改了多个BUG</p>
            </div>
        </van-dialog>

    </div>
</template>
<script>
    export default {
        mounted() {
            let user = this.$cookies.get("user_name");
            let outLogin = document.getElementById("outLogin");
            if(user !== null){
                console.log(user);
                outLogin.className = "out-login-true";
            }else{
                outLogin.className = "out-login-false";
            }
        },
        data() {
            return {
                show: false,
                number: 1,
                versionNumber:"至游新版3.2.3",
            };
        },
        methods: {
            outLogin(path){
                this.$cookies.remove("user_name");
                this.goTo(path);
            },
            goTo(path) {
                this.$router.replace(path)
            },
            Checkupdates() {
                this.show = true;
            },
            chargeBtn(action, done) {//确认or取消
                if (action === 'cancel') {//取消按钮
                    done();
                } else if (action === 'confirm') {//确定按钮
                    //向后端传值并关闭dialog弹出框
                    this.show = false;
                    this.UpdateApp();
                }
                done();
            },
            UpdateApp(){
                alert("执行更新函数！！");
            }
        }
    }
</script>

<style scoped>
    .settings {
        background-color: #eeeeee;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    /********************************************字体图标************************************/
    .settings-icon {
        font-family: iconfont;
        font-size: 36px;
        font-style: normal;
    }

    .liuhai {
        height: 50px;
        width: 100%;
        background-color: white;
    }

    .settings-header {
        width: 100%;
        height: 96px;
        display: flex;
        flex-direction: row;
        background-color: white;
    }

    .settings-header > div {
        width: 20%;
        height: 80px;
    }

    .settings-header > div:nth-child(2) {
        width: 60%;
        font-size: 36px;
        color: #44444a;
        text-align: center;
        line-height: 80px;
    }

    .settings-header > div:nth-child(1) {
        display: flex;
        align-items: center;
    }

    .settings-header > div:nth-child(1) > i {
        margin-left: 16px;
    }

    /****************************************基本信息*****************************************************/
    .b-settings {
        height: 291px;
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
    }

    .b-settings > li {
        width: 100%;
        height: 96px;
        display: flex;
        border-bottom: 1px #e9e9e9 solid;
        align-items: center;
        justify-content: space-between;
    }

    .b-settings > li p {
        font-size: 28px;
        margin-left: 30px;
    }

    .b-settings > li i {
        margin-right: 18px;
    }

    /***************************************检查更新*******************************************************/
    .n-settings {
        height: 184px;
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
    }

    .n-settings > li {
        width: 100%;
        height: 96px;
        display: flex;
        border-bottom: 1px #e9e9e9 solid;
        align-items: center;
        justify-content: space-between;
    }

    .n-settings > li p {
        font-size: 28px;
        margin-left: 30px;
    }

    .n-settings > li i {
        margin-right: 18px;
    }

    /***************************************退出登录******************************************************/
    .out-login-true {
        width: 100%;
        height: 96px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        color: white;
        background-color: #ec9b38;
    }
    .out-login-false {
        width: 100%;
        height: 96px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        color: white;
        background-color: #999999;
        display: none;
    }
    .checkUpdatesBox{
        width: 450px;
        height: 380px;
    }
    .checkUpdatesBoxH3{
        text-align: center;
        font-size: 30px;
        margin-top: 25px;
        font-weight: normal;
    }
    .updateContent{
        width: 100%;
        height: 238px;
        padding: 0 44px;
        margin-top: 21px;
        text-align: center;
        font-size: 20px;
    }
</style>
